<template>
  <main class="taskCase_container">
    <h2>需求管理</h2>
    <header class="flex flex-between">
      <div class="aside">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="任务类型：">
            <el-input
              v-model="formInline.rwlx"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入任务类型"
            ></el-input>
          </el-form-item>
          <el-form-item label="目标形态：">
            <el-input
              v-model="formInline.mbxt"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入目标形态"
            ></el-input>
          </el-form-item>
          <el-form-item label="气象条件：">
            <el-input
              v-model="formInline.qxtj"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入气象条件"
            ></el-input>
          </el-form-item>
          <!--          <el-form-item label="需求来源：">-->
          <!--            <el-date-picker v-model="formInline.times" type="daterange" range-separator="至" start-placeholder=""-->
          <!--              end-placeholder="">-->
          <!--            </el-date-picker>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit"
              >查询</el-button
            >
            <el-button type="primary" size="small" @click="onReset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="aside">
        <el-form :inline="true" class="demo-form-inline" size="small">
          <!--          <el-form-item label="xxx检索">-->
          <!--            <el-input v-model="formInline.targetArea" placeholder=""></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="">
            <!-- <el-button type="primary" size="small">搜索</el-button> -->
            <el-button
              type="primary"
              size="small"
              @click="handleExportObservation"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </header>
    <main class="table_container">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        stripe
        class="mainTable"
        height="75vh"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="tableData[props.$index].gcxqPointList"
              style="width: 100%"
            >
              <el-table-column label="序号" width="80" type="index" />
              <el-table-column
                show-overflow-tooltip
                label="目标编号"
                prop="mbbh"
              />
              <el-table-column
                show-overflow-tooltip
                label="经度"
                prop="pointJd"
              />
              <el-table-column
                show-overflow-tooltip
                label="纬度"
                prop="pointWd"
              />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="需求名称" prop="xqmc">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="任务类型" prop="rwlx">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="目标形态" prop="mbxt">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="气象条件" prop="qxtj">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="攻击因素" prop="gjys">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="是否合作目标"
          prop="sfhzmb"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip label="载荷类型" prop="zhlx">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="工作模式" prop="gzms">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="分辨率(m)" prop="fbl">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="优先级" prop="yxj">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="操作">
          <template slot-scope="scope">
            <!-- <span class="operation" @click="addNewTaskCase(1)"
              >添加&nbsp; |&nbsp;
            </span> -->
            <span class="operation" @click="GetPlanTasksDetail(scope.row, 0)"
              >编辑&nbsp; |&nbsp;
            </span>
            <span class="operation" @click="DeletePlanTasks(scope.row)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
    <footer class="fl_row_start">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="formInline.pageCurrent"
        :page-size="formInline.pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </footer>

    <el-dialog
      :title="taskCaseBool ? '需求导入' : '需求编辑'"
      :visible.sync="dialogVisible"
      @close="handleCloseModal('ruleForm')"
    >
      <el-form
        :label-position="labelPosition"
        label-width="140px"
        :model="formLabelAlign"
        size="medium"
        :rules="rules"
        ref="ruleForm"
        style="padding: 35px 10px 0; align-items: initial"
      >
        <div class="flex">
          <el-form-item label="需求名称：" class="item-width" prop="xqmc">
            <el-input
              v-model="formLabelAlign.xqmc"
              v-max-length-tip="30"
              v-no-space
            ></el-input>
          </el-form-item>
          <el-form-item label="任务类型：" class="item-width" prop="rwlx">
            <el-select clearable v-model="formLabelAlign.rwlx">
              <el-option
                v-for="(item, index) in missionTypeOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="目标形态：" class="item-width" prop="mbxt">
            <el-select clearable v-model="formLabelAlign.mbxt">
              <el-option
                v-for="(item, index) in targetShapeOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="气象条件：" class="item-width" prop="qxtj">
            <el-select clearable v-model="formLabelAlign.qxtj">
              <el-option
                v-for="(item, index) in weatherConditionOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="攻击因素：" class="item-width" prop="gjys">
            <el-select v-model="formLabelAlign.gjys">
              <el-option
                v-for="item in whetherOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否合作目标：" class="item-width" prop="sfhzmb">
            <el-select v-model="formLabelAlign.sfhzmb">
              <el-option
                v-for="item in whetherOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="载荷类型：" class="item-width" prop="zhlx">
            <el-select
              v-model="formLabelAlign.zhlx"
              placeholder="请选择载荷类型"
            >
              <el-option
                v-for="item in zhlxOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作模式：" class="item-width" prop="gzms">
            <el-input
              v-model="formLabelAlign.gzms"
              v-max-length-tip="30"
              v-no-space
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="分辨率(m)：" class="item-width" prop="fbl">
            <el-select v-model="formLabelAlign.fbl" placeholder="请选择分辨率">
              <el-option
                v-for="item in resolutionOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="优先级：" class="item-width" prop="yxj">
            <el-select v-model="formLabelAlign.yxj" clearable>
              <el-option
                v-for="(item, index) in PriorityOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="UpdatePlanTasks('ruleForm')"
          >确定</el-button
        >
        <el-button type="primary" @click="handleCloseModal('ruleForm')"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </main>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>
